<template>
	<view class="container">
		<view class="content">
			<view class="contentbox">
				<z-tabs ref="tabs" class='tabs' :list="list" :current="data.current" @change="tabsChange" active-color="#FF1542"></z-tabs>
				<!--  @change="swiperChange"  @transition="swiperTransition" @animationfinish="swiperAnimationfinish" -->
				<swiper  :disable-touch="true" class="swiper"  :style="{height:$isIos()?'calc(100vh - 138px)':'calc(100vh - 130px)'}" :current="data.current">
					<swiper-item class="swiper-item" :style="{height:$isIos()?'calc(100vh - 138px)':'calc(100vh - 130px)'}" v-for="(item, index) in list" :key="index" >
						<scroll-view :style="{height:$isIos()?'calc(100vh - 138px)':'calc(100vh - 130px)'}" scroll-y="true" 
							:refresher-triggered="data.triggered" :refresher-threshold="100"
							 @refresherrefresh="onRefresh" @refresherrestore="onRestore"
							@refresherabort="onAbort" @scrolltolower="scrolltolower">
								<view   v-for="(items, indexs) in list[data.current].list" :key="index">
									<view class="goodsbox"  >
										<view class="titlebox">
											<view class="titleboxl"><image :src="$store.state.logo" mode=""></image> {{$store.state.name}}</view>
											<view class="titleboxr">{{data.statelist[items.state]}}</view>
										</view>
										<view class="goods" v-for="itemss in items.goods">
											<image :src="itemss.img" mode="aspectFill"></image>
											<view class="right">
												<view class="name textsl2">
													{{itemss.name}}
												</view>
												<view class="gg">
													规格：{{itemss.attributes}}
												</view>
												<view class="num">
													数量：{{itemss.number}}
												</view>
											</view>
										</view>
		
										<view class="titleboxs">
											<view class="titleboxl">共 {{items.number}} 件商品</view>
											<view class="titleboxr">运费￥{{$toFiexd(items.freight,2)}} <br> 商品总价￥{{$toFiexd(items.money,2)}}</view>
										</view>
										<view  class="bottombox">
											<view style="display: flex;" v-if="items.state==0">
												<view class="box1" @click="deleteProduct(items.order)">
													取消订单
												</view>
												<view class="box2" @click="$goURl('/pages/order/createorder?id='+items.order)">
													去付款
												</view>
											</view>
											<view v-if="items.state!=2&&items.state!=5">
												<view class="box2" @click="$goURl('/pages/order/orderdetail?order='+items.order+'&state='+items.state)">
													订单详情
												</view>
											</view>
											<view class="" v-if="items.state==2" >
												<view class="box2" @click="$goURl('/pages/order/logistics?order='+items.order)">
													物流信息
												</view>
											</view>
											<!-- <view   v-if="items.state==3||items.state==2||items.state==1" >
												<view class="box2"  @click="$goURl('/pages/order/applyfor?id='+items.order+'&state='+items.state)">
													申请售后
												</view>
											</view> -->
											<view v-if="items.state==2" >
												<view class="box2" @click="confirmReceipt(items.order)">
													确认收货
												</view>
											</view>
<!-- 											<view  v-if="items.state==3">
												<view class="box2"  @click="$goURl('/pages/order/evaluate?id='+items.order)">
													去评价
												</view>
											</view> -->
											<!-- <view v-if="items.state==5">
												<view class="box2"  @click="$goURl('/pages/order/refundDetails?id='+items.order)">
													售后
												</view>
											</view> -->
										</view>
									</view>
								</view>
								<empty v-if="!list[data.current].list.length"></empty>
						</scroll-view>
					</swiper-item>
				</swiper>
				<uni-load-more :status="data.loadmore"></uni-load-more>
			</view>
		</view>
	</view>
</template>
<script setup>
		import {ref,reactive,getCurrentInstance} from "vue";
		import {onLoad,onShow,onBackPress} from "@dcloudio/uni-app";
		const { proxy } = getCurrentInstance();
		let data =reactive({
			triggered: false,
			_freshing: false,
			list: [{name:'全部',list:[]},{name:'待付款',list:[]},{name:'待发货',list:[]},{name:'待收货',list:[]},{name:'已完成',list:[]}],
			statelist:['待付款','待发货','待收货','待评价','已完成'],
			loadmore:'more',
			current: 0,
			state:0,
			page:0,
			size:5,
			pages:1,
		})
		let list =ref([{name:'全部',list:[]},{name:'待付款',list:[]},{name:'待发货',list:[]},{name:'待收货',list:[]},{name:'已完成',list:[]}])
		let tabs=ref()
		onLoad((option)=>{
			try{
				if(option.state>=0){
					if(option.state==6){
						data.current=5
					}else{
						data.current=option.state
					}
					
				}
			}catch(option){
				
				}
				
		})
		onShow(()=>{
			console.log('页面onShow')
			data.page=0
			data.pages=1
			list.value[data.current].list=[]
			init()
		})
		onBackPress((event)=>{
			setTimeout(() => {  
					uni.switchTab({
							url:'/pages/personal/index'
					})
			 }, 300)
		})
		function init(){
			data.loadmore = "loading"
			let states= data.current
			let orderlist = JSON.parse(JSON.stringify(list.value))
			console.log('init',data.state,orderlist[states])
			if(data.page<data.pages){
				data.page++
				proxy.$request({
					url:`api/order/?page=${data.page}&size=${data.size}&state=${data.current==5?data.current:data.current-1}&source=2`,
					method:'get',
					data:{
						page:data.page,
						size:data.size
					},
					success:(res)=>{
						data.pages = Math.ceil(res.data.total / data.size)
						if (data.pages!=data.page) {
							data.loadmore = "more"
						}else{
							data.loadmore = "nomore"
						}
						if(res.data.data){
							res.data.data.forEach(item=>{
								orderlist[states].list.push(item)
							})
						}else{
							data.loadmore = "none"
						}
						list.value=orderlist

					}
				})
			}else{
				data.loadmore = "nomore"
			}
		
		}
		//确认收货
		function confirmReceipt(order){
			proxy.$request({
				url:`api/confirmOrder/`,
				method:'POST',
				data:{
					order:order
				},
				success:(reg)=>{
					data.page = 0
					data.pages = 1
					list.value[data.current].list = []
					init()
					if(reg.errno==0){
						uni.showToast({
							icon:'none',
							title:reg.errmsg
						})
					}
					
				}
			})
		}
		// 取消订单
		function deleteProduct(order){
			uni.showModal({
				title: '提示',
				content: '是否取消该订单',
				success: function (res) {
					if (res.confirm) {
						proxy.$request({
							url:`api/order/`,
							method:'DELETE',
							data:{
								order:order
							},
							success:(reg)=>{
								data.page = 0
								data.pages = 1	
								list.value[data.current].list=[]
								init()
								if(reg.errno==0){
									uni.showToast({
										icon:'none',
										title:reg.errmsg
									})
								}
								
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
		}
		function showCity(){
			
		}
		function scrolltolower(){
			console.log('scrolltolower')
			init()
		}
		//tabs通知swiper切换
		function tabsChange(index){
			data.current = index;
			data.state = index;
			data.page = 0;
			data.pages = 1;
			data.state = index;
			data.loadmore = "more"
			list.value[index].list=[]
			init()
		}
		function swiperChange(e){
			console.log(e.detail.current,'swiperChange')
			data.current = e.detail.current;
			data.state = e.detail.current;
			data.page = 0;
			data.pages = 1;
			data.state = e.detail.current;
			data.loadmore = "more"
			list.value[e.detail.current].list=[]
			init()
		}
		//swiper滑动中
		function swiperTransition(e){
			tabs.value.setDx(e.detail.dx);
		}
		//swiper滑动结束
		function swiperAnimationfinish(e) {
			data.current = e.detail.current;
			tabs.value.unlockDx();
		}
		
		function onRefresh(){
			console.log('onRefresh')
			if (data._freshing) return;
			data._freshing = true;
			setTimeout(function() {
				data.triggered = false;
				data._freshing = false;
			}, 1000)
		}
		function onRestore(){
			data.triggered = 'restore'; // 需要重置
			console.log("onRestore");
		}
		function onAbort(){
			console.log("onAbort");
		}
		function confirm(e) {
			console.log('e', e.detail.value)
		}

</script>


<style lang="scss" scoped>
	$nav-height: 30px;

	.container {
		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			justify-content: space-between;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			padding-right: 0;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
			overflow: hidden;

			.input-view-box {
				display: flex;

				.nav-bar-input {
					height: $nav-height;
					line-height: $nav-height;
					/* #ifdef APP-PLUS-NVUE */
					width: 370rpx;
					/* #endif */
					padding: 0 5px;
					font-size: 12px;
					background-color: #f8f8f8;
				}
			}

			.input-view-right {
				background-color: red;
				border-radius: $nav-height ;
				padding: 0 20upx;
				color: aliceblue;
			}
		}

		.content {

			.contentbox {
				// padding: $padding;
				.swiper{
					.swiper-item{
						
						view{
							.goodsbox {
								margin: 30upx;
								padding: 30upx;
								border-radius: 30upx;
								background-color: #fff;
							
								.goods {
									display: flex;
									margin-bottom: 30upx;
							
									image {
										width: 200upx;
										height: 200upx;
										border-radius: 30upx;
										margin-right: 30upx;
										// background-color: aquamarine;
									}
							
									.right {
										width: calc(100% - 230upx);
							
										.name {
											color: #333333;
											font-size: 32upx;
											font-weight: bold;
										}
							
										.gg {
											color: #999999;
											font-size: 24upx;
											margin: 20upx 0;
										}
							
										.num {
											color: #999999;
											font-size: 24upx;
											display: flex;
											justify-content: space-between;
											align-items: center;
										}
									}
								}
							
								.titlebox {
									display: flex;
									justify-content: space-between;
									color: #333333;
									margin: 30upx 0;
									margin-top: 0;
									padding-bottom: 30upx;
									border-bottom: 1upx solid #f5f5f5;
									.titleboxl {
										display: flex;
										align-items: center;
										font-size: 28upx;
										font-weight: 500;
										color: #333;
										image{
											width: 50upx;
											height: 50upx;
											margin-right: 20upx;
											border-radius: 25upx;
										}
									}
							
									.titleboxr {
										font-size: 28upx;
										font-weight: bold;
										color: #FFB915;
									}
								}
								.titleboxs {
									display: flex;
									justify-content: space-between;
									color: #333333;
									margin: 30upx 0;
									padding-top: 30upx;
									border-top: 1upx solid #f5f5f5;
									.titleboxl {
										font-size: 24upx;
										font-weight: 500;
										color: #999999;
									}
															
									.titleboxr {
										font-size: 28upx;
										font-weight: bold;
										color: #333;
									}
								}
								.bottombox{
									display: flex;
									justify-content: flex-end;
									flex-wrap: wrap;
									.box1{
										color:$color1;
										border:1upx solid $color1;
										padding: 10upx 30upx;
										margin-left: 20upx;
										border-radius: 30upx;
										font-size: 24upx;
									}
									.box2{
										color:$color3;
										border:1upx solid $color3;
										padding: 10upx 30upx;
										margin-left: 20upx;
										border-radius: 30upx;
										font-size: 24upx;
									}
								}
							}
						}
					}
				}
			}
		}
	}


	::v-deep .uni-navbar__header-btns-right {
		display: none !important;
	}
	
</style>